<template>
  <div class="playerClass">
    <!-- 当前播放的歌曲 -->
    <player-cover
      @openlyric="openlyric"
      :now-song="playList[currentIndex]"
    ></player-cover>

    <!-- 播放列表 -->
    <transition name="player-side">
      <player-list
        :cindex="currentIndex"
        v-show="isShowList"
        :list="playList"
        @close="closeList"
      ></player-list>
    </transition>
    <!-- 歌曲歌词等 -->
    <transition name="player-pure-side">
      <player-pure
        v-show="isPure"
        :song="playList[currentIndex]"
        :currentTime="currentTime"
        :lyric="lyric"
      ></player-pure>
    </transition>

    <audio
      autoplay
      :src="nowSong.url"
      @play="playLoad()"
      @pause="musicPause()"
      @ended="musicEnd()"
      @playing="musicPlaying()"
      @timeupdate="audioTimeUpdate()"
      ref="audio"
    ></audio>
    <!-- 前进后退播放按钮 -->
    <div class="player-toggle" :class="[`player-toggle-${theme}`]">
      <div class="player-pre player-toggle-item">
        <i class="player-icon iconfont icon--previous" @click="prev"></i>
      </div>
      <div class="player-player-type player-toggle-item">
        <i
          class="player-icon-type iconfont icon-bofang1"
          @click="toggelPlay"
          v-show="!isPlay"
        ></i>
        <i
          class="player-icon-type iconfont icon-zanting"
          @click="toggelPlay"
          v-show="isPlay"
        ></i>
      </div>
      <div class="player-next player-toggle-item">
        <i class="player-icon iconfont icon-next" @click="next"></i>
      </div>
    </div>

    <lyric
      :currentTime="currentTime"
      :lyric="lyric"
      height="40px"
      ref="lyric"
      class="player-lyric-simple"
      v-show="isShowLyric"
    ></lyric>

    <!--进度条 -->
    <div class="player-progress">
      <div class="player-progress-current-time">{{ getCurrentTime }}</div>
      <div class="player-progress-main">
        <el-slider
          :max="100"
          :min="0"
          :step="0.1"
          v-model="percent"
          @change="timeChange"
        ></el-slider>
      </div>
      <div class="player-progress-time">{{ getDuration }}</div>
    </div>
    <!-- 声音 -->
    <div class="player-volumn">
      <span>
        <i
          class="player-small-icon iconfont icon-V"
          @click="toggleVolume"
          v-show="!isVolume"
        />
        <i
          class="player-small-icon iconfont icon-jingyin"
          @click="toggleVolume"
          v-show="isVolume"
        />
      </span>
      <div class="player-volumn-progress">
        <el-slider v-model="Volumnpercent" @change="volumeChange"></el-slider>
      </div>
    </div>
    <!-- 右侧三个图标-->
    <div class="player-tool">
      <!--  播放模式-->
      <div class="player-tool-schema" @click="toggleSchema()">
        <a href="#" title="顺序播放" v-show="schemaIndex == 0"
          ><i class="player-small-icon iconfont icon-shunxu"
        /></a>
        <a href="#" title="随机播放" v-show="schemaIndex == 1"
          ><i class="player-small-icon iconfont icon-suiji"
        /></a>
        <a href="#" title="单曲播放" v-show="schemaIndex == 2"
          ><i class="player-small-icon iconfont icon-danqu"
        /></a>
      </div>
      <!-- 歌词图标 -->
      <div class="player-tool-lyric">
        <a href="#" title="歌词" @click="toggleLyric"
          ><i class="player-small-icon iconfont icon-lyric"
        /></a>
      </div>
      <!-- 歌单图标 -->
      <div class="player-tool-list" @click="togglePlayList()">
        <a href="#" title="歌单"
          ><i class="player-small-icon iconfont icon-gedan"
        /></a>
      </div>
    </div>
  </div>
</template>
<script>
import { theme } from '../mixin/global/theme'
import playerCover from './player-cover.vue'
import { _getMusicUrl } from '../network/play'
import playerList from './player-list.vue'
import { formatDate } from '../utils/tool'
import playerPure from './player-pure.vue'
import { _getLyric } from '../network/detail'
import Lyric from './player-lyric.vue'
export default {
  components: { playerCover, playerList, playerPure, Lyric },
  data () {
    return {
      isShowLyric: false, //是否显示歌词组件
      lyric: '', //歌词
      isPure: false, //是否显示歌词
      Volumnpercent: 100, //声音的百分比
      prevVolume: 0, //以前的音量
      isPlay: false, //是否在播放
      percent: 0, //歌曲的进度条
      isShowList: false, //是否显示播放列表
      isVolume: false, //切换静音图标
      schemaIndex: 0, //播放模式  0 顺序播放  1随机播放 2 单曲循环
      nowSong: {},
      duration: 0, //歌曲的总时长
      currentTime: 0, //当前播放时间
      currentIndex: 0, //当前播放歌曲的下标
      playList: [], //正在播放的列表
      isMusicDrag: false //是否在拖动进度条
    }
  },

  computed: {},
  mixins: [theme],
  mounted () {
    // 兄弟传参
    this.$bus.$on('playMusic', (id, index, songList) => {
      this.playList = songList //当前播放的歌曲列表
      this.currentIndex = index //当前播放下标
      this.playIng(id) //播放方法
    })
  },
  computed: {
    // 当前播放时间
    getCurrentTime () {
      return formatDate(new Date(this.currentTime * 1000), 'mm:ss') || '00:00'
    },
    getDuration () {
      return formatDate(new Date(this.duration * 1000), 'mm:ss') || '00:00'
    }
  },
  methods: {
    toggleLyric () {
      //切换中间显示歌词
      this.isShowLyric = !this.isShowLyric
    },
    openlyric () {
      // 打开歌词详情
      this.isPure = true
    },
    // 播放模式的改变的图标
    toggleSchema () {
      if (this.schemaIndex >= 2) {
        this.schemaIndex = 0
      } else {
        this.schemaIndex++
      }
    },
    volumeChange () {
      // 声音的拖拽
      this.$refs.audio.volume = this.Volumnpercent / 100
    },
    toggleVolume () {
      //静音
      this.isVolume = !this.isVolume
      if (this.isVolume) {
        // 保存之前的音量
        this.prevVolume = this.Volumnpercent
        // 设置音频音量为0
        this.$refs.audio.volume = 0
      } else {
        // 音量0-1
        // 保存的音量 设置给音频标签
        this.$refs.audio.volume = this.prevVolume / 100
        this.Volumnpercent = this.prevVolume
      }
    },
    timeChange () {
      //进度条改变
      this.isMusicDrag = true
      // 设置音频的当前的播放时间
      this.$refs.audio.currentTime =
        (this.percent / 100) * this.$refs.audio.duration
      //从新计算当前 百分比
      this.percent =
        (this.$refs.audio.currentTime / this.$refs.audio.duration) * 100
      // 不拖动状态
      this.isMusicDrag = false
    },
    closeList () {
      //关闭播放列表
      this.isShowList = false
    },
    next () {
      this.currentIndex++
      //下一曲
      if (this.currentIndex == this.playList.length) {
        this.currentIndex = 0 //
      }
      this.playIng(this.playList[this.currentIndex].id)
    },
    prev () {
      //上一曲
      console.log(123)
      this.currentIndex--
      if (this.currentIndex < 0) {
        this.currentIndex = this.playList.length - 1
      }
      this.playIng(this.playList[this.currentIndex].id)
    },
    togglePlayList () {
      //播放列表的显示隐藏切换
      this.isShowList = !this.isShowList
    },
    playIng (id) {
      // 通过歌曲id 获取歌曲播放地址
      _getMusicUrl(id).then(res => {
        console.log('----------', res)
        this.nowSong = res.data.data[0]
      })
    },
    toggelPlay () {
      console.log('888888888888')
      //播放和暂停的方法
      this.isPlay = !this.isPlay
      if (this.isPlay && this.$refs.audio.readyState == 4) {
        this.$refs.audio.play() //播放
      } else {
        this.$refs.audio.pause() //暂停
      }
    },
    playLoad () {
      //播放事件
      this.isPlay = true
      // 获取歌曲总时长
      this.duration = this.$refs.audio.duration
      console.log('^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^')
      //开始播放 获取歌词
      _getLyric(this.playList[this.currentIndex].id).then(res => {
        console.log('*************', res)
        this.lyric = res.data.lrc.lyric
      })
    },
    musicPause () {
      //暂停事件
      this.isPlay = false
    },
    musicEnd () {
      //播放结束 判断播放模式
      switch (this.schemaIndex) {
        case 0:
          // 顺序播放
          this.currentIndex > this.playList.length - 1 ? 0 : this.currentIndex++
          break
        case 1:
          // 随机播放
          this.currentIndex = Math.floor(Math.random() * this.playList.length)
          break
        case 2:
          // 单曲循环
          this.currentIndex = this.currentIndex
          this.$refs.audio.load() //音频从新加载
          break
      }
      // 播放
      this.playIng(this.playList[this.currentIndex].id)
    },
    musicPlaying () {
      //歌曲正在播放
    },
    audioTimeUpdate () {
      //音频的事件改变时间
      if (this.$refs.audio != null) {
        // 获取当前音频的播放时间
        this.currentTime = this.$refs.audio.currentTime
      }
      if (!this.isMusicDrag) {
        //未拖动进度条   当前播放时间      歌曲总时长
        this.percent = (this.currentTime / this.duration) * 100
      }
    }
  }
}
</script>
<style lang="less" scoped>
.playerClass {
  width: 100%;
  height: 60px;
  position: relative;
  display: flex;
}
.player-toggle {
  width: 18%;
  padding: 0px 10px;
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: center;
  &-item {
    padding: 0px 20px;
    text-align: center;
    cursor: pointer;
  }
  &-light {
    color: var(--light-main-color);
  }
  &-dark {
    color: var(--dark-main-color);
  }
  &-green {
    color: var(--green-main-color);
  }
}
/**player iconfont */
.player-icon {
  font-size: 26px !important;
}
/**toggle图标 */
.player-icon-type {
  font-size: 30px !important;
}
.player-progress {
  flex: 1;
  padding: 0px 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
  &-current-time {
    width: 50px;
    text-align: left;
  }
  &-time {
    width: 50px;
    text-align: right;
  }
  &-main {
    flex: 1;
  }
  // 深度修改 ui框架样式
  // /deep/.el-slider__bar {
  //   background: var(--green-main-color);
  // }
  ::v-deep.el-slider__bar {
    background: var(--green-main-color);
  }
  /deep/.el-slider__button {
    border: 2px solid var(--green-main-color);
  }
}
.player-volumn {
  width: 150px;
  padding: 0px 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  &-progress {
    flex: 1;
    padding: 0px 0px 0px 15px;
    ::v-deep.el-slider__bar {
      background: var(--green-main-color);
    }
    /deep/.el-slider__button {
      border: 2px solid var(--green-main-color);
    }
  }
}
// 播放模式
.player-tool {
  width: 200px;
  display: flex;
  align-items: center;
  padding: 0px 10px;
  text-align: center;
  a {
    text-decoration: none;
  }
  i {
    color: var(--green-main-color);
  }
  &-schema {
    width: calc(33%);
  }
  &-lyric {
    width: calc(33%);
  }
  &-list {
    width: calc(33%);
  }
}
.player-side-enter-active {
  animation: slideInRight var(--animation-base-time);
}
.player-side-leave-active {
  animation: slideInRight var(--animation-base-time) reverse;
}
.player-pure-side-enter-active {
  animation: slideInUp var(--animation-base-time);
}
.player-pure-side-leave-active {
  animation: slideInUp var(--animation-base-time) reverse;
}
// 歌词
.player-lyric-simple {
  width: 400px;
  height: 70px;
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 70px;
  margin: auto;
}
</style>
